<template>
  <div class="chat-page">
    <!-- 侧边栏 -->
    <aside class="sidebar" :class="{ collapsed: sidebarCollapsed }">
      <div class="sidebar-header">
        <button @click="toggleSidebar" class="sidebar-toggle">
          {{ sidebarCollapsed ? '→' : '←' }}
        </button>
        <h2 v-if="!sidebarCollapsed" class="sidebar-title">对话助手</h2>
      </div>

      <div v-if="!sidebarCollapsed" class="sidebar-content">
        <button @click="createNewChat" class="new-chat-button">
          <span class="button-icon">+</span>
          新建对话
        </button>

        <!-- 智能模型选择 -->
        <div class="model-selector">
          <label>选择助手类型</label>
          <select v-model="selectedModel" @change="onModelChange">
            <option v-for="model in availableModels" :key="model.id" :value="model.id">
              {{ model.name }}
            </option>
          </select>
        </div>

        <!-- 对话历史 -->
        <div class="chat-history">
          <h3 class="history-title">对话历史</h3>
          <div class="history-list">
            <div
              v-for="chat in chatHistory"
              :key="chat.id"
              :class="['history-item', { active: chat.id === currentChatId }]"
              @click="loadChat(chat.id)"
            >
              <div class="history-content">
                <div class="history-title-text">{{ chat.title }}</div>
                <div class="history-preview">{{ chat.lastMessage }}</div>
                <div class="history-time">{{ formatTime(chat.updatedAt) }}</div>
              </div>
              <button @click.stop="deleteChat(chat.id)" class="delete-button">×</button>
            </div>
          </div>
        </div>
      </div>
    </aside>

    <!-- 主对话区域 -->
    <main class="chat-main">
      <!-- 对话标题栏 -->
      <header class="chat-header">
        <div class="chat-title-section">
          <h1 class="chat-title">{{ currentChatTitle }}</h1>
          <div class="model-info">
            <span class="model-badge">{{ selectedModelName }}</span>
            <span class="model-status" :class="{ online: isModelOnline }">
              {{ isModelOnline ? '在线' : '离线' }}
            </span>
          </div>
        </div>
        <div class="chat-actions">
          <button @click="exportChat" class="action-button">📤 导出</button>
          <button @click="clearChat" class="action-button">🗑️ 清空</button>
        </div>
      </header>

      <!-- 消息列表 -->
      <div ref="messagesContainer" class="messages-container">
        <div v-if="messages.length === 0" class="empty-state">
          <div class="empty-icon">💬</div>
          <h3>开始新的对话</h3>
          <p>选择一个助手类型，然后输入您的问题开始对话</p>
          
          <div class="suggested-questions">
            <h4>试试这些话题：</h4>
            <div class="questions-grid">
              <button
                v-for="question in suggestedQuestions"
                :key="question"
                @click="sendSuggestedQuestion(question)"
                class="question-button"
              >
                {{ question }}
              </button>
            </div>
          </div>
        </div>

        <div v-else class="messages-list">
          <div v-for="message in messages" :key="message.id" :class="['message', message.role]">
            <div class="message-avatar">
              <span v-if="message.role === 'user'" class="user-avatar">😊</span>
              <span v-else class="ai-avatar">💬</span>
            </div>
            <div class="message-content">
              <div class="message-header">
                <span class="message-author">
                  {{ message.role === 'user' ? '您' : '助手' }}
                </span>
                <span class="message-time">{{ formatTime(message.timestamp) }}</span>
              </div>
              <div class="message-text">
                <div v-if="message.isTyping" class="typing-indicator">
                  <span></span><span></span><span></span>
                </div>
                <div v-else v-html="formatMessage(message.content)"></div>
              </div>
              <div v-if="message.role === 'assistant'" class="message-actions">
                <button @click="copyMessage(message.content)" class="message-action">
                  📋 复制
                </button>
                <button @click="regenerateMessage(message.id)" class="message-action">
                  🔄 重新生成
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 输入区域 -->
      <div class="input-section">
        <div class="input-container">
          <div class="input-wrapper">
            <textarea
              ref="messageInput"
              v-model="inputMessage"
              @keydown="handleKeyDown"
              @input="handleInput"
              placeholder="说点什么..."
              class="message-input"
              :disabled="isLoading"
            ></textarea>
            <button
              @click="sendMessage"
              :disabled="!inputMessage.trim() || isLoading"
              class="send-button"
            >
              <span v-if="isLoading" class="loading-spinner"></span>
              <span v-else>📤</span>
            </button>
          </div>
          <div class="input-footer">
            <span class="tip">💡 Shift+Enter 换行，Enter 发送</span>
            <span class="character-count">{{ inputMessage.length }}/2000</span>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import { ref, computed, nextTick, onMounted } from 'vue'
import { chatApi } from '@/api'

export default {
  name: 'Chat',
  setup() {
const sidebarCollapsed = ref(false)
const currentChatId = ref(null)
const selectedModel = ref(1)
const inputMessage = ref('')
const isLoading = ref(false)
const messagesContainer = ref(null)
const messageInput = ref(null)

// 模拟数据
const availableModels = ref([
  { id: 1, name: '智能助手', description: '智能对话助手', online: true },
  { id: 2, name: '快速助手', description: '快速响应助手', online: true },
  { id: 3, name: '专业助手', description: '专业领域助手', online: true }
])

const chatHistory = ref([
  {
    id: 1,
    title: '关于AI的讨论',
    lastMessage: '人工智能的发展趋势如何？',
    updatedAt: new Date(Date.now() - 30 * 60 * 1000)
  },
  {
    id: 2,
    title: '编程问题求助',
    lastMessage: '如何优化这段Python代码？',
    updatedAt: new Date(Date.now() - 2 * 60 * 60 * 1000)
  }
])

const messages = ref([])

const suggestedQuestions = [
  '和我聊聊今天的心情吧',
  '帮我写一段温暖的文字',
  '推荐几本好看的书籍',
  '聊聊如何让生活更美好？'
]

// 计算属性
const selectedModelName = computed(() => {
  const model = availableModels.value.find(m => m.id === selectedModel.value)
  return model?.name || '未知模型'
})

const isModelOnline = computed(() => {
  const model = availableModels.value.find(m => m.id === selectedModel.value)
  return model?.online || false
})

const currentChatTitle = computed(() => {
  if (currentChatId.value) {
    const chat = chatHistory.value.find(c => c.id === currentChatId.value)
    return chat?.title || '新对话'
  }
  return '新对话'
})

// 方法
const toggleSidebar = () => {
  sidebarCollapsed.value = !sidebarCollapsed.value
}

const createNewChat = () => {
  currentChatId.value = Date.now()
  messages.value = []
}

const loadChat = (chatId) => {
  currentChatId.value = chatId
  messages.value = [
    {
      id: 1,
      role: 'user',
      content: '你好，请介绍一下自己',
      timestamp: new Date(Date.now() - 10 * 60 * 1000)
    },
    {
      id: 2,
      role: 'assistant',
      content: '您好！我是AI助手，很高兴为您服务。我可以帮助您解答问题、提供建议、协助创作等。',
      timestamp: new Date(Date.now() - 9 * 60 * 1000)
    }
  ]
  scrollToBottom()
}

const deleteChat = (chatId) => {
  chatHistory.value = chatHistory.value.filter(chat => chat.id !== chatId)
  if (currentChatId.value === chatId) {
    createNewChat()
  }
}

const sendMessage = async () => {
  if (!inputMessage.value.trim() || isLoading.value) return

  const userMessage = {
    id: Date.now(),
    role: 'user',
    content: inputMessage.value.trim(),
    timestamp: new Date()
  }

  messages.value.push(userMessage)
  
  const messageText = inputMessage.value.trim()
  inputMessage.value = ''
  
  const aiMessage = {
    id: Date.now() + 1,
    role: 'assistant',
    content: '',
    timestamp: new Date(),
    isTyping: true
  }
  messages.value.push(aiMessage)
  
  isLoading.value = true
  scrollToBottom()

  try {
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 2000))
    
    const responses = [
      '这是个很有意思的话题。让我和您一起探讨...',
      '根据您的描述，我建议试试这些方法：\n1. 先从问题的核心开始\n2. 寻找适合的解决方案\n3. 一步步实现想法',
      '我理解您的想法。这里有几个要点值得注意：\n• 保持开放的心态\n• 考虑不同的视角\n• 找到适合自己的方式'
    ]
    
    const randomResponse = responses[Math.floor(Math.random() * responses.length)]
    
    aiMessage.isTyping = false
    aiMessage.content = randomResponse
    
    updateChatHistory(userMessage.content, randomResponse)
    
  } catch (error) {
    aiMessage.isTyping = false
    aiMessage.content = '抱歉，出了点小问题，请稍后重试。'
  } finally {
    isLoading.value = false
    scrollToBottom()
  }
}

const sendSuggestedQuestion = (question) => {
  inputMessage.value = question
  sendMessage()
}

const handleKeyDown = (event) => {
  if (event.key === 'Enter' && !event.shiftKey) {
    event.preventDefault()
    sendMessage()
  }
}

const handleInput = () => {
  const textarea = messageInput.value
  if (textarea) {
    textarea.style.height = 'auto'
    textarea.style.height = Math.min(textarea.scrollHeight, 200) + 'px'
  }
}

const onModelChange = () => {
  console.log('模型切换到:', selectedModelName.value)
}

const copyMessage = async (content) => {
  try {
    await navigator.clipboard.writeText(content)
    console.log('已复制到剪贴板')
  } catch (error) {
    console.log('复制失败')
  }
}

const regenerateMessage = (messageId) => {
  const messageIndex = messages.value.findIndex(m => m.id === messageId)
  if (messageIndex > 0) {
    const userMessage = messages.value[messageIndex - 1]
    messages.value = messages.value.slice(0, messageIndex)
    inputMessage.value = userMessage.content
    sendMessage()
  }
}

const clearChat = () => {
  if (confirm('确定要清空当前对话吗？')) {
    messages.value = []
  }
}

const exportChat = () => {
  const chatContent = messages.value.map(msg => 
    `${msg.role === 'user' ? '用户' : 'AI'}: ${msg.content}`
  ).join('\n\n')
  
  const blob = new Blob([chatContent], { type: 'text/plain' })
  const url = URL.createObjectURL(blob)
  const a = document.createElement('a')
  a.href = url
  a.download = `chat-${new Date().toISOString().slice(0, 10)}.txt`
  a.click()
  URL.revokeObjectURL(url)
}

const updateChatHistory = (userMessage, aiResponse) => {
  if (currentChatId.value) {
    const existingChat = chatHistory.value.find(c => c.id === currentChatId.value)
    if (existingChat) {
      existingChat.lastMessage = userMessage
      existingChat.updatedAt = new Date()
    } else {
      chatHistory.value.unshift({
        id: currentChatId.value,
        title: userMessage.length > 30 ? userMessage.slice(0, 30) + '...' : userMessage,
        lastMessage: userMessage,
        updatedAt: new Date()
      })
    }
  }
}

const scrollToBottom = () => {
  nextTick(() => {
    if (messagesContainer.value) {
      messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
    }
  })
}

const formatTime = (time) => {
  const now = new Date()
  const diff = now - time
  const minutes = Math.floor(diff / (1000 * 60))
  const hours = Math.floor(diff / (1000 * 60 * 60))

  if (minutes < 1) return '刚刚'
  if (minutes < 60) return `${minutes}分钟前`
  if (hours < 24) return `${hours}小时前`
  return time.toLocaleDateString()
}

const formatMessage = (content) => {
  return content
    .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
    .replace(/\*(.*?)\*/g, '<em>$1</em>')
    .replace(/`(.*?)`/g, '<code>$1</code>')
    .replace(/\n/g, '<br>')
}

    onMounted(() => {
      createNewChat()
    })

    return {
      sidebarCollapsed,
      currentChatId,
      selectedModel,
      inputMessage,
      isLoading,
      messagesContainer,
      messageInput,
      availableModels,
      chatHistory,
      messages,
      suggestedQuestions,
      selectedModelName,
      isModelOnline,
      currentChatTitle,
      toggleSidebar,
      createNewChat,
      loadChat,
      deleteChat,
      sendMessage,
      sendSuggestedQuestion,
      handleKeyDown,
      handleInput,
      onModelChange,
      copyMessage,
      regenerateMessage,
      clearChat,
      exportChat,
      formatTime
    }
  }
}
</script>

<style scoped>
.chat-page {
  display: flex;
  height: 100vh;
  background: linear-gradient(135deg, #FAF8F5 0%, #f5f3f0 50%, #F0EDE8 100%);
  position: relative;
}

.chat-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle at 25% 25%, rgba(250, 234, 218, 0.1) 0%, transparent 25%),
    radial-gradient(circle at 75% 75%, rgba(163, 196, 188, 0.1) 0%, transparent 25%);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 0;
}

/* 侧边栏样式 */
.sidebar {
  width: 300px;
  background: rgba(255, 255, 255, 0.95);
  border-right: 1px solid #A3C4BC;
  display: flex;
  flex-direction: column;
  transition: width 0.3s ease;
  backdrop-filter: blur(20px);
  box-shadow: 2px 0 16px rgba(0, 0, 0, 0.05);
  z-index: 1;
}

.sidebar.collapsed {
  width: 60px;
}

.sidebar-header {
  padding: 16px;
  border-bottom: 1px solid rgba(163, 196, 188, 0.3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, rgba(139, 115, 85, 0.05), rgba(163, 196, 188, 0.05));
}

.sidebar-toggle {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  color: #6b7280;
}

.sidebar-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #8B7355;
}

.sidebar-content {
  padding: 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.new-chat-button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #8B7355 0%, #A3826B 100%);
  color: white;
  border: none;
  border-radius: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(139, 115, 85, 0.3);
}

.new-chat-button:hover {
  background: linear-gradient(135deg, #A3826B 0%, #8B7355 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(139, 115, 85, 0.4);
}

.model-selector label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #374151;
}

.model-selector select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #A3C4BC;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  color: #8B7355;
  font-weight: 500;
  transition: all 0.3s ease;
}

.model-selector select:focus {
  outline: none;
  border-color: #8B7355;
  box-shadow: 0 0 0 3px rgba(139, 115, 85, 0.1);
}

.chat-history {
  flex: 1;
  overflow: hidden;
}

.history-title {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
}

.history-list {
  max-height: 100%;
  overflow-y: auto;
}

.history-item {
  display: flex;
  align-items: center;
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
  margin-bottom: 4px;
  transition: background 0.2s ease;
}

.history-item:hover {
  background: rgba(163, 196, 188, 0.1);
  transform: translateX(4px);
}

.history-item.active {
  background: rgba(163, 196, 188, 0.15);
  border-left: 3px solid #8B7355;
  border-radius: 0 8px 8px 0;
}

.history-content {
  flex: 1;
  min-width: 0;
}

.history-title-text {
  font-size: 14px;
  font-weight: 500;
  color: #1f2937;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-preview {
  font-size: 12px;
  color: #6b7280;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 4px;
}

.history-time {
  font-size: 11px;
  color: #9ca3af;
}

.delete-button {
  background: none;
  border: none;
  color: #ef4444;
  font-size: 16px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.history-item:hover .delete-button {
  opacity: 1;
}

/* 主对话区域样式 */
.chat-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);
  z-index: 1;
}

.chat-header {
  padding: 16px 24px;
  border-bottom: 1px solid rgba(163, 196, 188, 0.3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, rgba(139, 115, 85, 0.05), rgba(163, 196, 188, 0.05));
}

.chat-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #8B7355;
}

.model-info {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.model-badge {
  background: rgba(163, 196, 188, 0.2);
  color: #8B7355;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid rgba(163, 196, 188, 0.3);
}

.model-status {
  font-size: 12px;
  color: #ef4444;
}

.model-status.online {
  color: #10b981;
}

.chat-actions {
  display: flex;
  gap: 8px;
}

.action-button {
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid #A3C4BC;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #8B7355;
}

.action-button:hover {
  background: rgba(163, 196, 188, 0.1);
  transform: translateY(-1px);
}

/* 消息区域样式 */
.messages-container {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #6b7280;
}

.empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.empty-state h3 {
  margin: 0 0 8px 0;
  font-size: 20px;
  color: #374151;
}

.suggested-questions {
  margin-top: 32px;
}

.suggested-questions h4 {
  margin: 0 0 16px 0;
  font-size: 14px;
  color: #374151;
}

.questions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px;
  max-width: 600px;
  margin: 0 auto;
}

.question-button {
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(163, 196, 188, 0.3);
  border-radius: 12px;
  text-align: left;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
  backdrop-filter: blur(10px);
}

.question-button:hover {
  border-color: #8B7355;
  background: rgba(163, 196, 188, 0.1);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(139, 115, 85, 0.1);
}

.messages-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.message {
  display: flex;
  gap: 12px;
}

.message.user {
  flex-direction: row-reverse;
}

.message-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.user-avatar {
  background: linear-gradient(135deg, #8B7355, #A3826B);
  color: white;
  font-size: 16px;
  border: 2px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 2px 8px rgba(139, 115, 85, 0.3);
}

.ai-avatar {
  background: linear-gradient(135deg, rgba(163, 196, 188, 0.2), rgba(139, 115, 85, 0.1));
  font-size: 16px;
  border: 2px solid rgba(163, 196, 188, 0.3);
  backdrop-filter: blur(10px);
}

.message-content {
  flex: 1;
  min-width: 0;
}

.message.user .message-content {
  text-align: right;
}

.message-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.message.user .message-header {
  justify-content: flex-end;
}

.message-author {
  font-size: 14px;
  font-weight: 500;
  color: #374151;
}

.message-time {
  font-size: 12px;
  color: #9ca3af;
}

.message-text {
  background: rgba(249, 250, 251, 0.9);
  padding: 12px 16px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.5;
  color: #374151;
  border: 1px solid rgba(163, 196, 188, 0.2);
  backdrop-filter: blur(10px);
}

.message.user .message-text {
  background: linear-gradient(135deg, #8B7355, #A3826B);
  color: white;
  border: none;
  box-shadow: 0 2px 8px rgba(139, 115, 85, 0.3);
}

.typing-indicator {
  display: flex;
  gap: 4px;
  align-items: center;
}

.typing-indicator span {
  width: 6px;
  height: 6px;
  background: #A3C4BC;
  border-radius: 50%;
  animation: typing 1.4s infinite ease-in-out;
}

.typing-indicator span:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-indicator span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typing {
  0%, 60%, 100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-10px);
  }
}

.message-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.message:hover .message-actions {
  opacity: 1;
}

.message-action {
  padding: 4px 8px;
  background: none;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  font-size: 12px;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.2s ease;
}

.message-action:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
}

/* 输入区域样式 */
.input-section {
  padding: 24px;
  border-top: 1px solid rgba(163, 196, 188, 0.3);
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(20px);
}

.input-container {
  max-width: 800px;
  margin: 0 auto;
}

.input-wrapper {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  margin-bottom: 8px;
}

.message-input {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid #A3C4BC;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.5;
  resize: none;
  min-height: 44px;
  max-height: 200px;
  outline: none;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
}

.message-input:focus {
  border-color: #8B7355;
  box-shadow: 0 0 0 3px rgba(139, 115, 85, 0.1);
  background: rgba(255, 255, 255, 0.95);
}

.send-button {
  padding: 12px 16px;
  background: linear-gradient(135deg, #8B7355, #A3826B);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 50px;
  height: 44px;
  box-shadow: 0 2px 8px rgba(139, 115, 85, 0.3);
}

.send-button:hover:not(:disabled) {
  background: linear-gradient(135deg, #A3826B, #8B7355);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(139, 115, 85, 0.4);
}

.send-button:disabled {
  background: #A3C4BC;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.loading-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid transparent;
  border-top: 2px solid white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.input-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #9ca3af;
}

.tip {
  display: flex;
  align-items: center;
  gap: 4px;
}

.character-count {
  font-weight: 500;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    z-index: 1000;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }

  .sidebar.show {
    transform: translateX(0);
  }

  .sidebar.collapsed {
    width: 300px;
    transform: translateX(-100%);
  }

  .chat-main {
    width: 100%;
  }

  .questions-grid {
    grid-template-columns: 1fr;
  }

  .input-wrapper {
    flex-direction: column;
    gap: 8px;
  }

  .send-button {
    width: 100%;
  }
}
</style>